<!DOCTYPE HTML>
<html>
<head>
    <title>Todo</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <link rel="stylesheet" href="/editor/common.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body  style="padding: 0;width: 100%;height: 100%">
<div class="mini-splitter" style="width:100%;height:100%;">
    <div size="240" showCollapseButton="true">
        <div class="mini-fit">
            <ul id="tree1" class="mini-tree"  url="/getdata/userLevelTree" style="width:100%;"
                showTreeIcon="true" textField="name" idField="id" onnodeclick="onNodeDblClick" parentField="pid" resultAsTree="false"
            >
            </ul>
        </div>
    </div>
    <div id="right" showCollapseButton="true">
        <div id="outImg">
            <img id="imgId" src="" alt="" onclick="smallImg()">
        </div>
        <div style="padding: 5px">
            <span>等级：</span><input  class="mini-textbox" type="text" id="name"/>
            <span>等级id：</span><input  class="mini-textbox" type="text" id="objectId"/>
            <a class="mini-button" iconCls="icon-search" onclick="search()">查找</a>
        </div>
        <div style="width:99%;" >
            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
                <table style="width:100%;">
                    <tr>
                        <td style="width:100%;">
                            <a class="mini-button" iconCls="icon-add" onclick="levelAdd()">增加</a>
                            <a class="mini-button" iconCls="icon-edit" onclick="onMoveNode()">等级移动</a>
                            <a class="mini-button" iconCls="icon-edit" onclick="userLevelEdit()">编辑</a>
                            <a class="mini-button" iconCls="icon-remove" onclick="levelRemove()">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 82%;"
             url="/getdata/userLevelInformation" idField="id" allowResize="true"
             sizeList="[20,30,50,100]" pageSize="30"
        >
            <div property="columns">
                <div type="checkcolumn" ></div>
                <div field="id" width="120" headerAlign="center" allowSort="true" >授权等级id</div>
                <div field="name" width="80" align="center" headerAlign="center" allowSort="true" >名称</div>
                <!--<div field="telephone"  width="50" align="center" headerAlign="center" renderer="onIconRenderer" allowSort="true" >店铺图像</div>-->
                <div field="pid"  align="center" headerAlign="center" width="100" allowSort="true" >上级id</div>
                <div field="fatherName"  align="center" headerAlign="center" width="70" allowSort="true" >上级</div>
            </div>
        </div>
    </div>
</div>
<div id="moveWindow" title="选择目标节点" class="mini-window" style="width:300px;height:470px;"
     showModal="true" showFooter="true" allowResize="true"
>
    <ul id="moveTree" class="mini-tree" style="width:100%;100%;"
        showTreeIcon="true" textField="name" idField="id" onnodeclick="onNodeDblClickChild" parentField="pid" resultAsTree="false"

    >
    </ul>
    <div property="footer" style="padding:5px;">
        <table style="width:100%">
            <tr>
                <!--<td>-->
                    <!--插入方式：-->
                    <!--<select id="moveAction" >-->
                        <!--<option value="before" >节点前</option>-->
                        <!--<option value="after">节点后</option>-->
                        <!--<option value="add" selected>节点内</option>-->
                    <!--</select>-->
                <!--</td>-->
                <td style="width:120px;text-align:right;">
                    <input type="button" value="确定" onclick="okWindow()"/>
                    <input type="button" value="取消" onclick="hideWindow()"/>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script type="text/javascript">
    //    var userStatus = [{ id: 1, text: '审核成功' }, { id: 0, text: '未审核'},{ id: 4, text: '审核失败'},{ id: 3, text: '审核中'}];
    var levelName = '';
    var row = '';
    mini.parse();
    var tree = mini.get("tree1");
    var grid = mini.get("datagrid1");
    var moveWindow = mini.get("moveWindow");
    var moveTree = mini.get("moveTree");

    function fillMoveTree(treeData) {
        treeData = mini.clone(treeData);
        moveTree.loadData(treeData);
        moveTree.collapseAll();
//        document.getElementById("moveAction").value = "add";
    }
    function okWindow() {
        var moveNode = row;
        var targetNode = moveTree.getSelectedNode();
        var moveAction = "add";
        if (moveNode && targetNode && moveAction) {
//            targetNode = tree.getNode(targetNode.id);

            if (moveNode.pid== targetNode.id) {
                alert("移动节点不能是目标节点的父节点");
                return;
            }
            if (moveNode.id== targetNode.id) {
                alert("目标等级不能是自己");
                return;
            }

            $.ajax({
                type: "POST",
                url: "/getdata/addUserLevelTree",
                data: {
                    objectId:moveNode.id,
                    name: moveNode.name,
                    fatherId: targetNode.id,
                    fatherName:targetNode.name,
                },
                success: function (result) {
                    tree.reload();
                    grid.reload();
                }
            });

            moveWindow.hide();
        } else {
            alert("请选择一个目标节点");
        }

    }
    function hideWindow() {
        var moveWindow = mini.get("moveWindow");
        moveWindow.hide();
    }

    function onMoveNode(e) {
        row = grid.getSelected();
        if (row) {
//            row.text=row.name;
            var node = row;

            if (node) {
                moveWindow.show();
                fillMoveTree(tree.getData());
            } else {
                alert("请先选择节点");
            }
        }else{
            alert('请选中一条记录')
        }
    }

    grid.load();
    function onNodeDblClick(e) {
        grid.load({dept_id: e.node.id});
        levelName = e.node.id;
    }
    function search() {
        var name = mini.get("name").getValue();
        var objectId = mini.get("objectId").getValue();
        grid.load({
            name: name,
            objectId:objectId,
        });
    }
    function searchStatus() {
        var status = mini.get("status").getValue();
        grid.load({
            status: status
        });
    }
    $("#name,#objectId,#tel").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            search();
        }
    });


    function userLevelEdit() {
        var row = grid.getSelected();
        if (row) {
            mini.open({
                url: "/getdata/levelEdit?name="+row.name+"&levelName="+row.pid+"&id="+row.id,
                title: "编辑用户信息", width: 600, height: 300,

                ondestroy: function (action) {

                    grid.reload();
                    tree.reload();
                }
            });

        } else {
            alert("请选中一条记录");
        }

    }
    function levelAdd() {
        mini.open({
            url: "/getdata/addLevelTree?levelName="+levelName,
            title: "编辑用户信息", width: 600, height: 300,
            ondestroy: function (action) {

                grid.reload();
                tree.reload();

            }
        });
    }
    function levelRemove() {
        var row = grid.getSelected();
        if (row) {
            $.ajax({
                url:"/getdata/levelRemove",
                type:'POST',
                data:{
                    id:row.id,
                },
                success:function (result) {
                    if (result=='0'){
                        alert("请先删除用户")
                    }else if (result=='2'){
                        alert("请删除等级下面的等级")
                    }else if(result=='1'){
                        grid.reload();
                        tree.reload();
                    }else {
                        alert('出现错误');
                    }
                }
            });
        } else {
            alert("请选中一条记录");
        }

    }
</script>
</html>